<template>
  <div class="statistics">
    <div class="peripheralBox">
      <div class="headline">自动化营销看板</div>
      <div class="content">
        <div class="state">
          <div class="stateText">选择状态</div>
          <div class="checkState">
            <!-- 用户获取数据 -->
            <div class="checkBox">
              <el-checkbox
                v-model="acquisition"
                @change="changeacquisition(acquisition)"
                >用户获取数据（拉新）</el-checkbox
              >
            </div>
            <!-- 初步意向 -->
            <div class="checkBox">
              <el-checkbox
                v-model="preliminaryOpinion"
                @change="changepreliminaryOpinion(preliminaryOpinion)"
                >初步意向（培育）</el-checkbox
              >
            </div>
            <!-- 意向 -->
            <div class="checkBox">
              <el-checkbox
                v-model="intentionFoster"
                @change="changeintentionFoster(intentionFoster)"
                >意向（培育）</el-checkbox
              >
            </div>
            <!-- 报价（培育） -->
            <div class="checkBox">
              <el-checkbox v-model="offerFoster"
                @change="changeofferFoster(offerFoster)"
              >报价（培育）</el-checkbox>
            </div>
            <!--投保（培育）  -->
            <div class="checkBox">
              <el-checkbox v-model="insureFoster"
               @change="changeinsureFoster(insureFoster)"
              >投保（培育）</el-checkbox>
            </div>
            <!-- 售后（培育） -->
            <div class="checkBox">
              <el-checkbox v-model="aftersaleFoster"
              @change="changeaftersaleFoster(aftersaleFoster)"
              >售后（培育）</el-checkbox>
            </div>
            <!-- 保全（成交） -->
            <div class="checkBox">
              <el-checkbox v-model="clinchSave"
               @change="changeclinchSave(clinchSave)"
              >保全（成交）</el-checkbox>
            </div>
            <!-- 理赔（培育） -->
            <div class="checkBox">
              <el-checkbox v-model="claimsettlementFoster"
                @change="changeclaimsettlementFoster(claimsettlementFoster)"
                >理赔（培育）</el-checkbox
              >
            </div>
            <!-- 多次成交（培育） -->
            <div class="checkBox">
              <el-checkbox v-model="makebargainFoster"
              @change="changemakebargainFoster(makebargainFoster)"
                >多次成交（培育）</el-checkbox
              >
            </div>
          </div>
        </div>
        <div class="statisticalContent" id="nav">
          <!-- 用户获取数据 -->
          <div
            class="userStatistics"
            v-show="acquisition"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
          >
            <div class="userStatistics_headline">用户获取（拉新）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">今日新客</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherbox">
                <div id="echart" ref="views"></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiesacquisitiondata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flaggacquisition = !flaggacquisition"
                    v-show="flaggacquisition && activitiesacquisition.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 初步意见 -->
          <div
            class="userStatistics"
            v-show="preliminaryOpinion"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
          
          >
            <div class="userStatistics_headline">初步意见（培育）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">今日新客</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherboxpreliminaryOpinion" zoom:2>
                <div
                  id="echartpreliminaryOpinion"
                  ref="viewspreliminaryOpinion"
                ></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiespreliminaryOpiniondata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flaggpreliminaryOpinion = !flaggpreliminaryOpinion"
                    v-show="flaggpreliminaryOpinion && activitiespreliminaryOpinion.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 意向 -->
          <div
            class="userStatistics"
            v-show="intentionFoster"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
     
          >
            <div class="userStatistics_headline">意见（培育）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">今日新客</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherboxintentionFoster">
                <div
                  id="echartintentionFoster"
                  ref="viewsintentionFoster"
                ></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiesintentionFosterdata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flaggintentionFoster = !flaggintentionFoster"
                    v-show="flaggintentionFoster && activitiesintentionFoster.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 报价 -->
          <div
            class="userStatistics"
            v-show="offerFoster"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
            
          >
            <div class="userStatistics_headline">报价（培育）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">新增客户</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherboxofferFoster">
                <div id="echartofferFosterr" ref="viewsofferFoster"></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiesofferFosterdata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flaggofferFoster = !flaggofferFoster"
                    v-show="flaggofferFoster && activitiesofferFoster.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 投保 -->
          <div
            class="userStatistics"
            v-show="insureFoster"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
          
          >
            <div class="userStatistics_headline">投保（培育）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">新增客户</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherboxinsureFoster">
                <div id="echartinsureFoster" ref="viewsinsureFoster"></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiesinsureFosterdata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flagginsureFoster = !flagginsureFoster"
                    v-show="flagginsureFoster && activitiesinsureFoster.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 售后 -->
          <div
            class="userStatistics"
            v-show="aftersaleFoster"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
          
          >
            <div class="userStatistics_headline">售后（培育）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">新增客户</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherboxaftersaleFoster">
                <div id="echartaftersaleFoster" ref="viewsaftersaleFoster"></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiesaftersaleFosterdata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flaggaftersaleFoster = !flaggaftersaleFoster"
                    v-show="flaggaftersaleFoster && activitiesaftersaleFoster.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
               <!-- 保全 -->
          <div
            class="userStatistics"
            v-show="clinchSave"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
         
          >
            <div class="userStatistics_headline">保全（培育）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">新增客户</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherboxclinchSave">
                <div id="echartclinchSave" ref="viewsclinchSave"></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiesclinchSavedata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flaggclinchSave = !flaggclinchSave"
                    v-show="flaggclinchSave && activitiesclinchSave.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
                     <!-- 理赔 -->
          <div
            class="userStatistics"
            v-show="claimsettlementFoster"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
       
          >
            <div class="userStatistics_headline">理赔（培育）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">新增客户</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherboxclaimsettlementFoster">
                <div id="echartclaimsettlementFoster" ref="viewsclaimsettlementFoster"></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiesclaimsettlementFosterdata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flaggclaimsettlementFoster = !flaggclaimsettlementFoster"
                    v-show="flaggclaimsettlementFoster && activitiesclaimsettlementFoster.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
                             <!-- 多次成交 -->
          <div
            class="userStatistics"
            v-show="makebargainFoster"
            :style="{ 'max-height': this.timeLineHeight + 'px' }"
           
          >
            <div class="userStatistics_headline">多次成交（培育）</div>
            <!-- 数据分析时间 -->
            <div class="userStatistics_chart">
              <div class="chart_time">
                <div class="chart_time_text">
                  <img src="" alt="" />
                  <div class="text">数据分析</div>
                </div>
                <div class="time">2022-09-09</div>
              </div>
              <!-- 客户数目 -->
              <div class="broadnessMarkets">客户数： 2022</div>
              <div class="overview">
                <div class="newCustomer">
                  <div class="newCustomerText">今日新客</div>
                  <div class="newCustomerNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
                <div class="increase">
                  <div class="increaseText">新增客户</div>
                  <div class="increaseNumber">86</div>
                  <div class="yesterday">
                    <div class="yesterdayText">较昨日</div>
                    <div class="yesterdayImg">
                      <img src="" alt="" />
                    </div>
                    <div class="yesterdayNumber">35%</div>
                  </div>
                </div>
              </div>

              <div id="fatherboxmakebargainFoster">
                <div id="echartmakebargainFoster" ref="viewsmakebargainFoster"></div>
              </div>
            </div>

            <div class="taskPlanning">
              <div class="taskPlanningTimeline">
                <div class="block">
                  <div class="taskPlanningText">任务计划</div>

                  <el-timeline :reverse="reverse">
                    <el-timeline-item
                      v-for="(activity, index) in activitiesmakebargainFosterdata"
                      :key="index"
                    >
                      <!-- :timestamp="activity.timestamp" -->
                      <el-card>
                        <div class="blockData">
                          {{ activity.content }}
                        </div>
                        <div class="blockText">
                          {{ activity.timestamp }}
                        </div>
                        <div class="blockcontents">
                          {{ activity.contents }}
                        </div>
                        <div class="blockpercentage">
                          <div class="numberPeople">
                            待发送人数： {{ activity.numberPeople }}
                          </div>
                          <div class="clickRate">
                            点击率：{{ activity.clickRate }}
                          </div>
                          <div class="ascentDescent">
                            {{ activity.ascentDescent }}
                          </div>
                        </div>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                  <div
                    class="open-box"
                    @click="flaggmakebargainFoster = !flaggmakebargainFoster"
                    v-show="flaggmakebargainFoster && activitiesmakebargainFoster.length > 3"
                  >
                    <div class="open">更多</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      acquisition: true, //用户数据
      preliminaryOpinion: false, //初步意见
      intentionFoster: false, //意见（培育）
      offerFoster: false, //报价
      insureFoster: false, //投保
      aftersaleFoster: false, //售后
      clinchSave: false, //保全
      claimsettlementFoster: false, //理赔
      makebargainFoster: false, //多次成交
      reverse: false,
      timeLineHeight: "",
      flaggacquisition   : true,
      flaggpreliminaryOpinion: true,
      flaggintentionFoster: true,
      flaggofferFoster: true,
      flagginsureFoster: true,
      flaggaftersaleFoster: true,
      flaggclinchSave: true,
      flaggclaimsettlementFoster: true,
      flaggmakebargainFoster: true,
      activitiesacquisition: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
      ],
          activitiespreliminaryOpinion: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
      ],
               activitiesintentionFoster: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },


      ],  
      activitiesofferFoster: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
      ],
      activitiesinsureFoster: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
      ],
      activitiesaftersaleFoster: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
      ],
      activitiesclinchSave: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
      ],
      activitiesclaimsettlementFoster: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
      ],
      activitiesmakebargainFoster: [
        {
          content: "第1天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第2天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
        {
          content: "第3天 上午9:00发送",
          timestamp: "消息每日",
          contents: "推送消息1,使用[私聊]触点,个人SOP提醒",
          numberPeople: "265",
          clickRate: "52%",
          ascentDescent: "35%",
        },
      ],

      
  

      //折线图
      erchatsTableofferFoster: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "2022-09-09",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "2022-09-02",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "2022-09-04",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "2022-09-03",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "2022-09-05",
        },
      ],
      erchatsTablepreliminaryOpinion: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "2022-09-09",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "2022-09-02",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "2022-09-04",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "2022-09-03",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "2022-09-05",
        },
      ],
      erchatsTableintentionFoster: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "2022-09-09",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "2022-09-02",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "1号",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "2号",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "3号",
        },
      ],
      erchatsTableinsureFoster: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "4号",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "5号",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "6号",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "7号",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "今天",
        },
      ],
          erchatsTableaftersaleFoster: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "2022-09-09",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "2022-09-10",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "2022-09-11",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "2022-09-12",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "2022-09-13",
        },
      ],
      
       erchatsTableclinchSave: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "2022-09-09",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "2022-09-10",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "2022-09-11",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "2022-09-12",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "2022-09-13",
        },
      ],
      
           erchatsTableclaimsettlementFoster: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "2022-09-09",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "2022-09-10",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "2022-09-11",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "2022-09-12",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "2022-09-13",
        },
      ],
         erchatsTablemakebargainFoster: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "2022-09-09",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "2022-09-10",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "2022-09-11",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "2022-09-12",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "2022-09-13",
        },
      ],
      erchatsTable: [
        {
          a: "0",
          b: 2,
          c: 0,
          d: 1,
          e: "2022-09-09",
        },
        {
          a: "0",
          b: 4,
          c: 0,
          d: 2,
          e: "2022-09-10",
        },

        {
          a: "0",
          b: 5,
          c: 0,
          d: 1,
          e: "2022-09-11",
        },
        {
          a: "0",
          b: 0,
          c: 8,
          d: 0,
          e: "2022-09-12",
        },
        {
          a: "0",
          b: 0,
          c: 7,
          d: 0,
          e: "2022-09-13",
        },
      ],
    };
  },
  computed: {
    activitiesacquisitiondata() {
      return this.flaggacquisition ? this.activitiesacquisition.slice(0, 3) : this.activitiesacquisition;
    },
    activitiespreliminaryOpiniondata() {
      return this.flaggpreliminaryOpinion ? this.activitiespreliminaryOpinion.slice(0, 3) : this.activitiespreliminaryOpinion;
    },
    
    activitiesintentionFosterdata() {
      return this.flaggintentionFoster ? this.activitiesintentionFoster.slice(0, 3) : this.activitiesintentionFoster;
    },
    activitiesofferFosterdata() {
      return this.flaggofferFoster ? this.activitiesofferFoster.slice(0, 3) : this.activitiesofferFoster;
    },
    
       activitiesinsureFosterdata() {
      return this.flagginsureFoster ? this.activitiesinsureFoster.slice(0, 3) : this.activitiesinsureFoster;
    },
    
     activitiesaftersaleFosterdata() {
      return this.flaggaftersaleFoster ? this.activitiesaftersaleFoster.slice(0, 3) : this.activitiesaftersaleFoster;
    },
    activitiesclinchSavedata() {
      return this.flaggclinchSave ? this.activitiesclinchSave.slice(0, 3) : this.activitiesclinchSave;
    },
    
        activitiesclaimsettlementFosterdata() {
      return this.flaggclaimsettlementFoster ? this.activitiesclaimsettlementFoster.slice(0, 3) : this.activitiesclaimsettlementFoster;
    },
    
    activitiesmakebargainFosterdata() {
      return this.flaggmakebargainFoster ? this.activitiesmakebargainFoster.slice(0, 3) : this.activitiesmakebargainFoster;
    },
  },
  mounted() {
    this.timeLineHeight = document.documentElement.clientHeight - 150;
    window.onresize = () => {
      this.timeLineHeight = document.documentElement.clientHeight - 150;
    };
   
    this.serErchat();
    this.serErchatpreliminaryOpinion();
    this.serErchatintentionFoster();
    this.serErchatofferFoster();
    this.serErchatinsureFoster();
    this.serErchataftersaleFoster();
    this.serErchatclinchSave();
    this.serErchatclaimsettlementFoster();
    this.serErchatmakebargainFoster();
  },
  methods: {
      // 初始化与绑定监听事件方法
    // scrollInit() {
    //   // 获取要绑定事件的元素
    //   const nav = document.getElementById("nav")
    //   var flag; // 鼠标按下
    //   var downX; // 鼠标点击的x下标
    //   var scrollLeft; // 当前元素滚动条的偏移量
    //   nav.addEventListener("mousedown", function (event) {
    //   flag = true;
    //   downX = event.clientX; // 获取到点击的x下标
    //   scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
    //   });
    //   nav.addEventListener("mousemove", function (event) {
    //   if (flag) { // 判断是否是鼠标按下滚动元素区域
    //   var moveX = event.clientX; // 获取移动的x轴
    //   var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
    //   this.scrollLeft = scrollLeft - scrollX // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
    //   console.log(scrollX)
    //   }
    //   });
    //   // 鼠标抬起停止拖动
    //   nav.addEventListener("mouseup", function () {
    //   flag = false;
    //   });
    //   // 鼠标离开元素停止拖动
    //   nav.addEventListener("mouseleave", function (event) {
    //   flag = false;
    //   });
    // },
 
    // 用户获取数据
    changeacquisition(acquisition) {
      if (acquisition) {
        let obj = document.getElementById("echart");
        let charts = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          charts.resize();
        }, 200);
      }
    },
    // 初步意向
    changepreliminaryOpinion(preliminaryOpinion) {
      if (preliminaryOpinion) {
        let obj = document.getElementById("echartpreliminaryOpinion");
        let chartspreliminaryOpinion = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartspreliminaryOpinion.resize();
        }, 200);
      }
    },
    //意向
    changeintentionFoster(intentionFoster) {
      if (intentionFoster) {
        let obj = document.getElementById("echartintentionFoster");
        let chartsintentionFoster = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsintentionFoster.resize();
        }, 200);
      }
    },
    // 报价
    changeofferFoster(offerFoster) {
      if (offerFoster) {
        let obj = document.getElementById("echartofferFosterr");
        let chartsofferFoster = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsofferFoster.resize();
        }, 200);
      }
    },
     // 投保
    changeinsureFoster(insureFoster) {
      if (insureFoster) {
        let obj = document.getElementById("echartinsureFoster");
        let chartsinsureFoster = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsinsureFoster.resize();
        }, 200);
      }
    },
    //售后
    changeaftersaleFoster(aftersaleFoster) {
      if (aftersaleFoster) {
        let obj = document.getElementById("echartaftersaleFoster");
        let chartsaftersaleFoster = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsaftersaleFoster.resize();
        }, 200);
      }
    },
  //保全
    changeclinchSave(clinchSave) {
      if (clinchSave) {
        let obj = document.getElementById("echartclinchSave");
        let chartsclinchSave = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsclinchSave.resize();
        }, 200);
      }
    },
    //理赔
    changeclaimsettlementFoster(claimsettlementFoster) {
      if (claimsettlementFoster) {
        let obj = document.getElementById("echartclaimsettlementFoster");
        let chartsclaimsettlementFoster = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsclaimsettlementFoster.resize();
        }, 200);
      }
    },
        //多次成交
    changemakebargainFoster(makebargainFoster) {
      if (makebargainFoster) {
        let obj = document.getElementById("echartmakebargainFoster");
        let chartsmakebargainFoster = echarts.init(obj);
        let timer = 0;
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsmakebargainFoster.resize();
        }, 200);
      }
    },
    //用户获取数据
    serErchat() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTable.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLine(data.xData, series);
    },

    drawLine(xData, series) {
      let obj = document.getElementById("echart");
      let charts = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          charts.resize();
        }, 200);
      };

      charts.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        charts.resize();
      });
    },

    //初步意见
    serErchatpreliminaryOpinion() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTablepreliminaryOpinion.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLinepreliminaryOpinion(data.xData, series);
    },
    drawLinepreliminaryOpinion(xData, series) {
      let obj = document.getElementById("echartpreliminaryOpinion");
      let chartspreliminaryOpinion = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartspreliminaryOpinion.resize();
        }, 200);
      };
      chartspreliminaryOpinion.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        chartspreliminaryOpinion.resize();
      });
    },

    // 意见
    serErchatintentionFoster() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTableintentionFoster.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLineintentionFoster(data.xData, series);
    },
    drawLineintentionFoster(xData, series) {
      let obj = document.getElementById("echartintentionFoster");
      let chartsintentionFoster = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsintentionFoster.resize();
        }, 200);
      };
      chartsintentionFoster.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        chartsintentionFoster.resize();
      });
    },
    // 报价
    serErchatofferFoster() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTableofferFoster.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLineofferFoster(data.xData, series);
    },
    drawLineofferFoster(xData, series) {
      let obj = document.getElementById("echartofferFosterr");
      let chartsofferFoster = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsofferFoster.resize();
        }, 200);
      };
      chartsofferFoster.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        chartsofferFoster.resize();
      });
    },
    //投保    insureFoster
    serErchatinsureFoster() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTableinsureFoster.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLineinsureFoster(data.xData, series);
    },
    drawLineinsureFoster(xData, series) {
      let obj = document.getElementById("echartinsureFoster");
      let chartsinsureFoster = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsinsureFoster.resize();
        }, 200);
      };
      chartsinsureFoster.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        chartsinsureFoster.resize();
      });
    },

        //售后
    serErchataftersaleFoster() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTableaftersaleFoster.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLineaftersaleFoster(data.xData, series);
    },
    drawLineaftersaleFoster(xData, series) {
      let obj = document.getElementById("echartaftersaleFoster");
      let chartsaftersaleFoster = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsaftersaleFoster.resize();
        }, 200);
      };
      chartsaftersaleFoster.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        chartsaftersaleFoster.resize();
      });
    },
    //保全
        serErchatclinchSave() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTableclinchSave.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLineclinchSave(data.xData, series);
    },
    drawLineclinchSave(xData, series) {
      let obj = document.getElementById("echartclinchSave");
      let chartsclinchSave = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsclinchSave.resize();
        }, 200);
      };
      chartsclinchSave.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        chartsclinchSave.resize();
      });
    },
        //理赔
        serErchatclaimsettlementFoster() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTableclaimsettlementFoster.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLineclaimsettlementFoster(data.xData, series);
    },
    drawLineclaimsettlementFoster(xData, series) {
      let obj = document.getElementById("echartclaimsettlementFoster");
      let chartsclaimsettlementFoster = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsclaimsettlementFoster.resize();
        }, 200);
      };
      chartsclaimsettlementFoster.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        chartsclaimsettlementFoster.resize();
      });
    },
    
            //多次成交
        serErchatmakebargainFoster() {
      let data = {
        arr0: [],
        arr1: [],
        arr2: [],
        arr3: [],
        xData: [],
      };
      let series = [];
      console.log(this.erchatsTable);

      this.erchatsTablemakebargainFoster.forEach((a) => {
        data.xData.push(a.e);
        data.arr0.push(a.d);
        data.arr2.push(a.c);
        data.arr1.push(a.b);
        data.arr3.push(a.a);
      });

      for (let index = 0; index < 3; index++) {
        series.push({
          name: ["险种A", "险种B", "险种C"][index],
          type: "line",
          // stack: '总量',
          smooth: true,
          data: data["arr" + index],
          // itemStyle: {
          //   normal: {
          //     lineStyle: {
          //       color: colors[index]
          //     }
          //   }
          // },
          textStyle: {
            color: "#fff", // 主标题文字的颜色。
          },
        });
      }
      this.drawLinemakebargainFoster(data.xData, series);
    },
    drawLinemakebargainFoster(xData, series) {
      let obj = document.getElementById("echartmakebargainFoster");
      let chartsmakebargainFoster = echarts.init(obj);
      let timer = 0;
      window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
          chartsmakebargainFoster.resize();
        }, 200);
      };
      chartsmakebargainFoster.setOption({
        color: ["#088AEE", "#E74E59", "#14BF48"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["险种A", "险种B", "险种C"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
        },
        series,
      });
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        chartsmakebargainFoster.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
    // #nav{
    //   overflow-x: auto;
    //   overflow-y: hidden;
    // }
body,
style {
  width: 100%;
  height: 100%;
}
// 外围的框
.statistics {
  width: 100%;
  height: 100%;
}
// 大框
.peripheralBox {
  padding-left: 20px;
  background: rgb(246, 242, 242);
  width: 100%;
  // height: 100%;
}
// 头部标题
.headline {
  height: 50px;
  font-weight: 900;
  line-height: 50px;
  width: 200px;
  font-size: 25px;
}
// 复选选择器
.checkState {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .checkBox {
    flex: 1;
    padding: 10px;

    background: white;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
    box-shadow: -2.96px 0px 11.51px 2.96px rgba(0, 0, 0, 0.13);
    border-radius: 25px;
  }
}
.state {
  display: flex;
  justify-content: space-between;
  .stateText {
    margin: 15px;
    width: 100px;
    height: 10px;
    font-size: 20px;
    font-weight: 900;
  }
}
// 统计的大框
.content {
  width: 100%;
  // height: 100%;
  // align-content: space-around;
  background-color: white;
  // scroll-snap-type: y mandatory;

  // position: relative;
  // overflow-x: hidden;
  // overflow-y: auto;
  .statisticalContent {
    background-color: white;
    flex: 1;
    padding: 15px;
    scroll-snap-align: center;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;

    ::-webkit-scrollbar {
      display: none;
    }

    .userStatistics {
      width: 370px;
      height: 100%;
      padding: 15px;
      // 添加滚动
      // overflow-y: scroll;
      margin-right: 15px;
      background: rgb(247, 244, 244);
      .userStatistics_headline {
        font-weight: 900;
        font-size: 20px;
        width: 200px;
        height: 40px;
      }
      .userStatistics_chart {
        // width: 340px;
        width: 100%;
        background: white;
        padding: 15px;

        margin-bottom: 25px;
        .chart_time {
          display: flex;
          justify-content: space-between;
          .chart_time_text {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            .text {
              font-weight: 900;
              font-size: 15px;
            }
          }
          .time {
            font-weight: 700;
            font-size: 15px;
          }
        }
        .broadnessMarkets {
          font-weight: 700;
          font-size: 15px;
          margin-bottom: 5px;
        }
      }
      .overview {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .newCustomer {
          padding: 30px 25px;
          box-shadow: 0 0 9.67px 0 rgba(0, 0, 0, 0.16);
          margin: 5px;
          .newCustomerText {
            font-size: 15px;
            width: 60px;
            font-weight: 600;
            margin-bottom: 5px;
          }
          .newCustomerNumber {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 5px;
          }
          .yesterday {
            display: flex;
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 5px;
            img {
              margin-left: 10px;
            }
            .yesterdayText {
              width: 50px;
            }
            .yesterdayNumber {
              color: rgba(9, 205, 68, 0.652);
            }
          }
        }
      }
      .increase {
        padding: 30px 25px;
        box-shadow: 0 0 9.67px 0 rgba(0, 0, 0, 0.16);
        margin: 5px;
        .increaseText {
          font-size: 15px;
          width: 60px;
          font-weight: 600;
          margin-bottom: 5px;
        }
        .increaseNumber {
          font-size: 15px;
          font-weight: 600;
          margin-bottom: 5px;
        }
        .yesterday {
          display: flex;
          font-size: 15px;
          font-weight: 600;

          margin-bottom: 5px;
          img {
            margin-left: 10px;
          }
          .yesterdayText {
            width: 50px;
          }
          .yesterdayNumber {
            color: rgb(0, 255, 68);
          }
        }
      }
    }
  }
}
// 折线图
#echart {
  width: 100%;
  height: 100%;
}
#fatherbox {
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 12px;
}
#echartmakebargainFoster {
  width: 100%;
  height: 100%;
}
#fatherboxmakebargainFoster {
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 12px;
}
#echartclaimsettlementFoster {
  width: 100%;
  height: 100%;
}
#fatherboxclaimsettlementFoster {
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 12px;
}
#echartclinchSave {
  width: 100%;
  height: 100%;
}
#fatherboxclinchSave {
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 12px;
}

   
#echartaftersaleFoster {
  width: 100%;
  height: 100%;
}
#fatherboxaftersaleFoster{
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 12px;
}
#echartintentionFoster {
  width: 100%;
  height: 100%;
}
#fatherboxintentionFoster {
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 16px;
  background: #fff;
}
#echartofferFosterr {
  width: 100%;
  height: 100%;
}
#fatherboxofferFoster {
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 16px;
  background: #fff;
}
#echartinsureFoster {
  width: 100%;
  height: 100%;
}
#fatherboxinsureFoster {
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 16px;
  background: #fff;
}
#echartpreliminaryOpinion {
  width: 100%;
  height: 100%;
}
#fatherboxpreliminaryOpinion {
  padding-top: 30px;
  height: 380px;
  overflow-y: scroll;
  overflow: hidden;
  border-radius: 5px;
  font-size: 16px;
  background: #fff;
}
// 任务计划
.taskPlanning {
  background: white;
  padding: 10px;
  .taskPlanningTimeline {
    .block {
      .taskPlanningText {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
      }
      .blockpercentage {
        display: flex;
        .numberPeople {
          color: rgb(19, 108, 242);
          font-size: 12px;
        }
        .clickRate {
          font-size: 12px;

          color: rgb(19, 108, 242);
          margin-left: 20px;
          margin-right: 20px;
        }
        .ascentDescent {
          font-size: 12px;
          color: rgb(255, 0, 0);
        }
      }
    }
  }
}
.blockData {
  font-size: 15px;
  margin-bottom: 5px;
}
.blockText {
  font-size: 12px;
  color: rgb(205, 202, 202);
  margin-bottom: 5px;
}
.blockcontents {
  font-size: 12px;
  color: rgb(205, 202, 202);
  margin-bottom: 5px;
}

.open-box {
  width: 100%;
  height: 45px;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  line-height: 45px;
  box-shadow: 0 0 9.67px 0 rgba(0, 0, 0, 0.16);
}
</style>
